<template>
  <el-cascader :options="areaData"
               :show-all-levels="false"
               change-on-select
               v-model="value"
               @change="handleChange"></el-cascader>
</template>

<script>
import { getAreaTree } from '@/api/unitl'

export default {
  name: 'CitiesCon',
  props: {
    selectedOptions: String
  },
  data() {
    return {
      cityCode: '',
      areaData: [],
      value: []
    }
  },
  mounted() {
    this.getAreaData()
  },
  methods: {
    handleChange(value) {
      this.$emit('mychange', value[value.length - 1])
    },
    getAreaData() {
      getAreaTree().then(res => {
        if (res.data.success) {
          this.areaData = res.data.data
        }
      })
    },
    findValue(data, value, n = 2) {
      let z = '0000'
      if (n === 4) z = '00'

      for (var item of data) {
        if (item.value === value.substring(0, n) + z) {
          this.value.push(item.value)
          if (item.children) {
            this.findValue(item.children, value, 4)
          }
        }
      }
      this.value.push(value)
    }
  },
  watch: {
    selectedOptions() {
      this.value = []
      if (this.selectedOptions !== undefined && this.selectedOptions) this.findValue(this.areaData, this.selectedOptions)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
